import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/home',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue'),
    },
    {
      path: '/self',
      name: 'self',
      component: () => import('../views/SelfView.vue'),
    },
    {
      path: '/test',
      name: 'test',
      component: () => import('../views/TestView.vue'),
    },
    {
      path: '/testevent',
      name: 'testevent',
      component: () => import('../views/TestEventView.vue'),
    },
    {
      path: '/computed',
      name: 'computed',
      component: () => import('../views/ComputedView.vue'),
    },
    {
      path: '/class',
      name: 'class',
      component: () => import('../views/ClassView.vue'),
    },
    {
      path: '/props',
      name: 'props',
      component: () => import('../views/PropsView.vue'),
    },
    {
      path: '/emit',
      name: 'emit',
      component: () => import('../views/EmitView.vue'),
    },
    {
      path: '/provide',
      name: 'provide',
      component: () => import('../components/ProviderGrand.vue'),
    },
    {
      path: '/dynamicComponent',
      name: 'dynamicComponent',
      component: () => import('../components/DynamicComponent.vue'),
    },
    {
      path: '/myslot',
      name: 'myslot',
      component: () => import('../views/MySlot.vue'),
    },
    {
      path: '/resource',
      name: 'resource',
      component: () => import('../views/ResourceView.vue'),
    },
    {
      path: '/router',
      name: 'router',
      component: () => import('../views/RouterView.vue'),
    },
    {
      path: '/myhome',
      component: import('../views/RouterHomeView.vue'),
    },
    {
      path: '/myabout',
      component: import('../views/RouterAboutView.vue'),
    },
    {
      path: '/element-plus',
      component: () => import('../views/ElementPlus.vue'),
    },
    {
      path: '/vant',
      component: () => import('../views/VantView.vue'),
    },
    {
      path: '/ant',
      component: () => import('../views/AntView.vue'),
    },
    {
      path: '/axios',
      component: () => import('../views/AxiosView.vue'),
    },
    {
      path: '/vuex',
      component: () => import('../views/VuexView.vue'),
    },
    {
      path: '/pinia',
      component: () => import('../views/PiniaView.vue'),
    },
  ],
})

export default router
